<template>
  <div class="flex items-center justify-center bg-gray-100 p-4">
    <div>
      <table class="w-full border border-gray-300">
        <thead>
          <tr class="bg-gray-200">
            <th class="border border-gray-300 px-4 py-2">部门ID</th>
            <th class="border border-gray-300 px-4 py-2">部门名称</th>
            <th class="border border-gray-300 px-4 py-2">创建时间</th>
            <th class="border border-gray-300 px-4 py-2">更新时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in deptList" :key="item.id" class="bg-white">
            <td class="border border-gray-300 px-4 py-2">{{ item.id }}</td>
            <td class="border border-gray-300 px-4 py-2">{{ item.name }}</td>
            <td class="border border-gray-300 px-4 py-2">{{ item.createTime }}</td>
            <td class="border border-gray-300 px-4 py-2">{{ item.updateTime }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inStance } from '@/api/index'
import { onMounted, ref } from 'vue'
interface Dept {
  id: number
  name: string
  createTime: string
  updateTime: string
}
const deptList = ref<Dept[]>([])
onMounted(() => {
  inStance({})
    .then((res) => {
      deptList.value = res.data.data
      console.log(deptList.value)
    })
    .catch((err) => {
      console.log(err)
    })
})
</script>
